<template>
    <div class="form-group" :class="fix">
        <label :class="!upTable ? 'labelSize':'control_up_label'" :style="labelWidth"><span class="required"
                                                                                            v-if="required">*</span>{{title}}：</label>
        <select :class="{'form-control':!sreach}" type="text" :id="name" :name="name" v-model="value"
                :style="styles | style-filter upTable" v-el:sreach-select>
            <option :selected="val == option.value? 'selected': false" v-for="option in options"
                    :value="option.mchtId ? {value:option.value,mchtId:option.mchtId} : option.value">{{option.key | option-value sreach upTable}}
            </option>
        </select>
    </div>
</template>

<script>
    import {randomId} from "../general";
    import "./css/combo.select.css";
    import "./js/jquery.combo.select.js";

    export default {
        data: () => ({
            id: randomId()
        }),
        computed: {
            fix () {
                if (this.upTable) {
                    return "fix_height"
                } else {
                    return "fix_min_width"
                }
            },

        },
        props: {
            title: {type: String},
            name: String,
            disabled: {type: Boolean, default: false},
            value: [String, Number],
            val: [String, Number],
            options: {type: Array, default: () => []},
            upTable: {type: Boolean, default: false},
            required: {type: Boolean, default: false},
            sreach: {type: Boolean, default: false},
            styles: {type: String, default: 'width:265px;max-width:265px'},
            labelWidth: {type: String, default: ""}
        },
        created () {
            if (!this.value && this.options.length) {
                this.value = this.options[0].value.toString()
            }
        },
        methods: {
            reset () {
                if (this.sreach) {
                    $(".combo-input.text-input.form-control").prop("value", this.options[0].key)
                }
                if (this.options.length) {
                    this.value = this.options[0].value.toString()
                }
            }
        },
        watch: {
            options (v) {
                if (this.sreach) {
                    $(this.$els.sreachSelect).comboSelect();
                    $(this.$els.sreachSelect).attr("disabled",true) // 删除原来的下拉框
                    // $(".combo-input.text-input.form-control").prop("autocomplete","off")
                }
                if (this.options.length && this.options[0].value) {
                    this.value = this.options[0].value.toString()
                }
            },
        },
        ready () {
            if (this.sreach) {
                $(this.$els.sreachSelect).comboSelect();
                $(this.$els.sreachSelect).attr("disabled",true) // 删除原来的下拉框
                // $(".combo-input.text-input.form-control").prop("autocomplete","off")
                if (this.upTable) {
                    $(".combo-input.text-input.form-control").width(124)
                } else {
                    $(".combo-input.text-input.form-control").width(220)

                }
            }
        },
        filters: {
            styleFilter: (value, e) => e ? (value === "width:265px;max-width:265px" ? "width:230px;max-width:230px" : value || "") : value,
            optionValue: (value,sreach,upTable) =>{
                if(sreach){
                    return value
                }
                var length = value.length;
                for (var i = 0; i < value.length; i++) {
                    if (value.charCodeAt(i) > 127) {
                        length++;
                    }
                }
                if(upTable && length > 16) {
                    return value.substr(0,16)+"..."
                }else if(length > 23){
                    return value.substr(0,23)+"..."
                }else{
                    return value
                }
            }
        }
    }
</script>

<style>
    .combo-select {
        display: inline-block;
    }
</style>